<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 
      要设置canvas的宽度应该使用行内属性width/height
      或者使用js canvas.width / canvas.height
    */
    body {
      margin: 0;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas></canvas>
  <script>
    var 
      canvas = document.querySelector('canvas'),
      width = window.innerWidth,
      height = window.innerHeight

    canvas.width = width
    canvas.height = height
    var ctx = canvas.getContext('2d')
    
    function random (x, y) {
      return Math.random() * (y - x) + x
    }


    function Ball () {
      this.r = random(8, 12)
      this.x = random(0, width)
      this.y = random(0, height)
      this.sx = Math.random() > 0.5 ? random(0.05, 0.2) : -random(0.05, 0.2)
      this.sy = Math.random() > 0.5 ? random(0.05, 0.2) : -random(0.05, 0.2)
    }
    
    function createBalls (num) {
      var balls = []
      for (var i = 0; i < num; i++) {
        balls.push(new Ball())
      }
      return balls
    }

    function drawBalls (balls) {
      for (var i = 0; i < balls.length; i++) {
        var ball = balls[i]
        ctx.beginPath()
        ctx.fillStyle = 'rgb(200, 200, 200)'
        ctx.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI)
        ctx.fill()
        ctx.closePath()
      }
    }

    function drawLine (balls) {
      for (var i = 0; i < balls.length - 1; i++) {
        for (var j = i + 1; j < balls.length; j++) {
          var x = Math.sqrt(Math.pow(balls[i].x - balls[j].x, 2) + Math.pow(balls[i].y - balls[j].y, 2))
          if (x <= 500) {
            var a = (1 - x / 500) * 0.8
            ctx.beginPath()
            ctx.strokeStyle = 'rgba(200, 200, 200, ' + a + ')'
            ctx.moveTo(balls[i].x, balls[i].y)
            ctx.lineTo(balls[j].x, balls[j].y)
            ctx.stroke()
            ctx.closePath()
          } 
        }
      }
    }

    function move (balls) {
      for (var i = 0; i < balls.length; i++) {
        var ball = balls[i]
        if (ball.x >= ball.r + width) {
          ball.x = -ball.r
        }

        if (ball.x < -ball.r) {
          ball.x = ball.r + width
        }

        if (ball.y >= ball.r + height) {
          ball.y = -ball.r
        }

        if (ball.y < -ball.r) {
          ball.y = ball.r + height
        }

        ball.x += ball.sx
        ball.y += ball.sy
      }
    }
    
    function init () {
      var num = 30
      var balls = createBalls(num)
      drawBalls(balls)
      drawLine(balls)
      setInterval(function () {
        move(balls)
        ctx.clearRect(0, 0, width, height)
        drawBalls(balls)
        drawLine(balls)
      }, 16.7)

      canvas.onmousemove = function (e) {
        var ball = {
          x: e.clientX,
          y: e.clientY,
          r: 10,
          sx: 0,
          sy: 0
        }
        if (balls.length !== 30) {
          balls.pop()
        }
        balls.push(ball)
      }
      canvas.onmouseout = function () {
        balls.pop()
      }
    }

    init()


    

  </script>

</body>
</html>